<template>

  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/gyIndex' }">首页</el-breadcrumb-item>
    </el-breadcrumb>


    <div id="mainCus" style="width: 600px;height:400px;"></div>

  </div>
</template>

<script>
    export default {
        name: "GyIndex",
      data(){
        return{
          xsName:[],
          xsOrder:[]
        }
      },
      mounted() {

        var myChart = this.$echarts.init(document.getElementById('mainCus'));

        this.$http.post("/orders/xsList").then((res)=>{
          debugger;
          this.xsName=res.data.result.cusName;
          this.xsOrder=res.data.result.cusOrder
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '销售额占比',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: this.xsName
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data:this.xsOrder,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          myChart.setOption(option);
        })

      }
    }
</script>

<style scoped>

</style>
